<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2022/10/18
  Time: 9:38
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>新闻上下线</title>
    <!--引入elementui的样式-->
    <!-- 引入外部样式-->
    <link type="text/css" rel="stylesheet" href="css/index.css">
    <!-- 引入相关插件，也叫依赖-->
    <!--引入vue的依赖，必须在elementui之前引入vue-->
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript" src="js/axios.min.js"></script>
    <style>
        #page{
            padding: 2px 400px;
        }

        #newsContent{
            line-height:8;
        }

    </style>
</head>
<body>
<div id="app">
    <el-main>
        <%--根据所需要求进行查询--%>
        <el-form :inline="true" :model="newsSeacherForm" class="demo-form-inline">
            <el-form-item label="申报人">
                <el-input v-model="newsSeacherForm.newsAuthor" placeholder="发布者" style="width:100px"></el-input>
            </el-form-item>
            <el-form-item label="新闻标题">
                <el-input v-model="newsSeacherForm.newsTitle" placeholder="新闻标题" ></el-input>
            </el-form-item>
            <el-form-item label="申报类别">
                <el-select v-model="newsSeacherForm.kindId"  placeholder="新闻类别">
                    <el-option
                            v-for="item in kindData"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                            width="150">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="审核人">
                <el-input v-model="newsSeacherForm.newsUser" placeholder="审核人" style="width:100px"></el-input>
            </el-form-item>
            <el-form-item label="状态">
                <el-select v-model="newsSeacherForm.newsStatus"  placeholder="请选择">
                    <el-option label="已上线" value="2"></el-option>
                    <el-option label="已下线" value="4"></el-option>
                    <el-option label="已发布,未上线" value="5"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary"  @click="onSubmit()">查询</el-button>
            </el-form-item>
        </el-form>
        <!--表格部分-->
        <el-table
                :data="tableData"
                border
                style="width:100%">
            <el-table-column
                    prop="id"
                    label="编号"
                    width="55">
            </el-table-column>
            <el-table-column
                    prop="newsAuthor"
                    label="新闻发布者"
                    width="105">
            </el-table-column>
            <el-table-column
                    prop="newsTitle"
                    label="新闻标题"
                    width="200">
            </el-table-column>
            <el-table-column
                    prop="kind.name"
                    label="新闻类别"
                    width="90">
            </el-table-column>
            <el-table-column
                    prop="newsTime"
                    label="申报时间"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="newsUser"
                    label="审核人"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="newsOuttime"
                    label="审核时间"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="newsStatus"
                    label="状态"
                    width="140">
                <template slot-scope="scope">
                    <span v-if="scope.row.newsStatus==2">已上线</span>
                    <span v-if="scope.row.newsStatus==4">已下线</span>
                    <span v-if="scope.row.newsStatus==5">已发布，未上线</span>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="primary"  @click="onDetail(scope.row)" >查看详情</el-button>
                    <span v-if="scope.row.newsStatus ==4 || scope.row.newsStatus ==5">
                            <el-button type="success"  plain  @click="upNews(scope.row)" >上线</el-button>
                    </span>
                    <span v-if="scope.row.newsStatus==2">
                            <el-button type="danger"  plain  @click="downNews(scope.row)" >下线</el-button>
                    </span>
                    <span v-if="scope.row.newsUppid==7">
                            <el-button type="success"  plain  @click="topNews(scope.row)" >作品置顶</el-button>
                    </span>
                    <span v-if="scope.row.newsUppid==6">
                            <el-button type="danger"  plain  @click="dddNews(scope.row)" >取消置顶</el-button>
                    </span>
                    </template>

            </el-table-column>
        </el-table>

            <%--查看详情弹窗--%>
            <el-dialog
                    title="新闻详情"
                    :visible.sync="dialogVisible"
                    width="30%">
                <el-form  label-width="80px" :model="detailForm" ref="detailFormRef">
                    <el-form-item label="申报者:" >{{detailForm.newsAuthor}}</el-form-item>
                    <el-form-item label="新闻标题:">{{detailForm.newsTitle}}</el-form-item>
                    <el-form-item label="新闻类别:">{{newsName}}</el-form-item>
                    <el-form-item label="申报时间:">{{detailForm.newsTime}}</el-form-item>
                    <el-form-item label="新闻内容:">
                        <span v-html="detailForm.newsContent" ></span>
                    </el-form-item>
                </el-form>
            </el-dialog>



        <!-- 分页   -->
        <div id="page">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>

    </el-main>
</div>
</body>
<script>
    var app= new Vue({
        el:"#app",
        data: {
            tableData:[],
            kindData:[],
            //表单搜索对象,定义根据新闻的参数
            newsSeacherForm:{},
            //查看详情的对话框
            dialogVisible:false,
            //定义一个查看详情的表单
            detailForm:{},
            //定义新闻类别的参数
            newsName:'',
            //当前显示的页码
            currentPage:1,
            //每页显示的条数
            pageSize:5,
            //总条数
            total:0,

            id:0,
            newsUppid:0,
        },
        created(){
            this.initTable();
        },
        methods: {
            //查询按钮
            onSubmit(){
               axios.post("/news/list?currentPage="+this.currentPage+"&pageSize="+this.pageSize,this.newsSeacherForm).then(resp=>{
                   this.tableData = resp.data.data.list;
                   this.total = resp.data.data.total;
               })
            },
            // 查询所有内容
            initTable(){
                axios.post("/news/queryNewsUppid?currentPage="+this.currentPage+"&pageSize="+this.pageSize,this.newsSeacherForm).then(resp=>{
                    // console.log(resp.data.data.list);
                    this.tableData=resp.data.data.list;
                    this.total=resp.data.data.total;
                });
                this.kind();
            },
            //查询新闻类型
            kind(){
                axios.post("/kind/list").then(resp=>{
                    this.kindData=resp.data.data;
                });
            },
            //查看详情
            onDetail(row){
                //1.显示对话框
                this.dialogVisible = true;
                this.newsName=row.kind.name
                let parse = JSON.parse(JSON.stringify(row));
                //2.绑定表单数据
                this.detailForm=row;
            },

            //新闻上线
            upNews(row){
                this.detailForm.id=row.id;
                this.detailForm.newsStatus = 2;
                axios.post("/news/updateNews",this.detailForm).then(resp=>{
                    if(resp.data.code === 200){
                        this.initTable();
                    }
                })
            },
            //新闻下线
            downNews(row){
                this.detailForm.id=row.id;
                this.detailForm.newsStatus = 4;
                axios.post("/news/updateNews",this.detailForm).then(resp=>{
                    if(resp.data.code === 200){
                        this.initTable();
                    }
                })

            },
            //新闻置顶
            dddNews(row) {
                this.detailForm.id = row.id;
                this.detailForm.newsUppid = 7;
                axios.post("/news/updateNews", this.detailForm).then(resp => {
                    if (resp.data.code === 200) {
                        this.initTable();
                    }
                })
            },
            //取消置顶
            topNews(row){
                this.detailForm.id=row.id;
                this.detailForm.newsUppid = 6;
                axios.post("/news/updateNews",this.detailForm).then(resp=>{
                    if(resp.data.code === 200){
                        this.initTable();
                    }
                })


            },
            //分页
            handleSizeChange(val) {
                this.pageSize= val;
                this.initTable();
            },
            handleCurrentChange(val) {
                this.currentPage=val;
                this.initTable();
            },



        }
    })
</script>
</html>